在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

您所在的位置：网站首页 › less less什么意思 › 在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

2024-07-13 14:22| 来源: 网络整理| 查看: 265

在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量一、less是什么？二、操作步骤1.引入库2.设置style的lang属性3.使用lessless 中的 calc 总结

一、less是什么？ Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less是一种开源语言，也是跨浏览器兼容的语言。二、操作步骤 1.引入库

代码如下（示例）：

npm install [email protected] --save

在这里插入图片描述

完成引入Scss库显示如图但是在启动项目的时候，依然报错在这里插入图片描述解决办法在package.json文件中的dependencies直接写

"less": "^3.11.1", "less-loader": "^4.1.0",

然后在cmd命令行中输入

npm install

在这里插入图片描述完成之后在build/webpack.base.conf.js的module属性的rules中配置如下代码

{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" }

在这里插入图片描述

保存完成

2.设置style的lang属性

代码如下（示例）：

3.使用less

引用外部less文件时，要加@import，且需在末尾加分号 less的变量用 @ 符号叠加样式

@import "../common/css/bodycss.css"; @import "../common/css/lessTest.less"; @margin: 10px; #First { height: 100%; margin: @margin; } less 中的 calc height:calc(~“100% - 50px”); 总结 good morning

【本文地址】

在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

今日新闻

推荐新闻